<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{width: 200px;height:300px;background: red}
  </style>
</head>
<body>
  <div id="box">
    <span>1</span>
    <span>2</span>
    <span class="three">3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>
<script>

  var box = document.querySelector("#box")
  var three = document.querySelector("#box .three")

  // box.innerHTML = "<p>123</p>";

  // 创建元素
  var p = document.createElement("p");
  // 插入到指定父元素的最后一个子元素
  box.appendChild( p );
  // 插入到指定父元素的指定子元素之前
  box.insertBefore( p, three );

  // 注意：一个元素只能被插入到一个位置。后插入的生效

  p.innerText = "段落";

  p.style.background = "yellow"

  p.onclick = function(){
    console.log(1)
  }
  
</script>
</html>